<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			body,.mui-content{
			  	background-color: #333;
			  	color:#fff;
			  }
			  .title{
			  	margin: 35px 15px 10px;
			  }
			  .title+.content{
			  	margin: 10px 15px 35px;
			  	color: #bbb;
			  	text-indent: 1em;
			  	font-size: 14px;
			  	line-height: 24px;
			  }
			  .mui-table-view{
			  	margin-bottom: 35px;
			  }
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="title" style="margin-bottom: 25px;">切换小区</div>
			<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="color: #ddd;">
				
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#">
						尚都城
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#">
						尚都城
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="#">
						尚都城
					</a>
				</li>
			</ul>

			<div style="padding: 10px 15px; display: none;">
				<button style="padding: 5px 20px;" class="mui-btn mui-btn-primary mui-btn-block">
					新房间 
				</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			var subWebview=null,template=null,index=null;
			mui.plusReady(function () {
				//获得主页面webview引用；
				index = plus.webview.currentWebview().opener();
			})
			mui('.mui-table-view').on('tap', 'a', function() {
			});
			
			/**
			 * 关闭侧滑菜单
			 */
			function close() {
				mui.fire(mui.currentWebview.opener(),"menu:close");
			}
			
			//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
			window.addEventListener('dragstart',function(e){
				mui.gestures.touch.lockDirection = true; //锁定方向
				mui.gestures.touch.startDirection = e.detail.direction;
			});
			window.addEventListener('dragleft', function(e) {
				if(!mui.isScrolling){
					e.detail.gesture.preventDefault();	
				}
			});
			//监听左滑事件，若菜单已展开，左滑要关闭菜单；
			window.addEventListener("swipeleft",function (e) {
				if(Math.abs(e.detail.angle)>170){
					close();						
				}
			});
		</script>
	</body>

</html>